<!-- 用户列表页面 -->
<template>
    <div>
        <!-- <h4 style="margin-left: 10px;color: #d6a20f;">用户列表页面</h4> -->
        <a-card>
            <a-row :gutter="20">
                <!-- 添加按钮 -->
                <!-- <a-col :span="4">
                    <a-button type="primary" @click="addUser()">添加</a-button>
                </a-col> -->
            </a-row>

            <!-- 用户信息显示表格 -->
            <a-table
                :columns="columns"
                rowKey="id"
                :data-source="userlist"
                bordered
            >
                <!-- 根据角色码显示名称 -->
                <span slot="role" slot-scope="role">{{
                    role == 1 ? "管理员" : "订阅者"
                }}</span>
                <!-- 操作按钮 -->
                <template slot="action" slot-scope="data">
                    <div class="actionSlot">
                        <a-button
                            type="primary"
                            icon="edit"
                            style="margin: 0 5px"
                            @click="editUser(data.id)"
                            >编辑
                        </a-button>
                        <a-button
                            type="danger"
                            icon="delete"
                            style="margin: 0 5px"
                            @click="deleteUser(data.id)"
                            >删除
                        </a-button>
                        <a-button
                            type="danger"
                            icon="retweet"
                            style="
                                margin: 0 5px;
                                background-color: #8bc34a;
                                border-color: #8bc34a;
                            "
                            @click="changePwd(data.id)"
                            >改密
                        </a-button>
                        <!-- <a-button
                            type="info"
                            icon="undo"
                            style="
                                margin: 0 5px;
                                background-color: #f3f052;
                                border-color: #f3f052;
                            "
                            @click="resetPwd(data.id)"
                            >重置
                        </a-button> -->
                    </div>
                </template>
            </a-table>

            <!-- 新增用户区域 -->
            <!-- <a-modal
                closable
                title="新增用户"
                :visible="addUserVisible"
                @ok="addUserOk"
                @cancel="addUserCancel"
            >
                <a-form-model
                    :model="newUserInfo"
                    :rules="addUserRules"
                    ref="addUserRef"
                >
                    <a-form-model-item label="用户名" prop="username">
                        <a-input v-model="newUserInfo.username"></a-input>
                    </a-form-model-item>
                    <a-form-model-item
                        has-feedback
                        label="密码"
                        prop="password"
                    >
                        <a-input-password
                            v-model="newUserInfo.password"
                        ></a-input-password>
                    </a-form-model-item>
                    <a-form-model-item
                        has-feedback
                        label="确认密码"
                        prop="checkpass"
                    >
                        <a-input-password
                            v-model="newUserInfo.checkpass"
                        ></a-input-password>
                    </a-form-model-item>
                </a-form-model>
            </a-modal> -->

            <!-- 编辑用户区域 -->
            <a-modal
                closable
                title="编辑用户"
                :visible="editUserVisible"
                @ok="editUserOk"
                @cancel="editUserCancel"
            >
                <a-form-model :model="userInfo" ref="editUserRef">
                    <a-form-model-item label="昵称" prop="nickname">
                        <a-input v-model="userInfo.nickname"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="QQ" prop="qq">
                        <a-input v-model="userInfo.qq"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="邮箱" prop="email">
                        <a-input v-model="userInfo.email"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="座右铭" prop="motto">
                        <a-input v-model="userInfo.motto"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="个人信息" prop="personalProfile">
                        <a-textarea
                            v-model="userInfo.personalProfile"
                            :rows="4"
                        />
                    </a-form-model-item>
                    <a-form-model-item label="小头像" prop="smallAvatarIcon">
                        <a-input v-model="userInfo.smallAvatarIcon"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="大头像" prop="bigAvatarIcon">
                        <a-input v-model="userInfo.bigAvatarIcon"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="是否为管理员" prop="role">
                        <a-switch
                            :checked="IsAdmin"
                            checked-children="是"
                            un-checked-children="否"
                            @change="adminChange"
                        />
                    </a-form-model-item>
                </a-form-model>
            </a-modal>

            <!-- 修改密码区域 -->
            <a-modal
                closable
                title="修改密码"
                :visible="changePwdVisible"
                @ok="changePwdOk"
                @cancel="changePwdCancel"
            >
                <a-form-model
                    :model="userInfoChangePwd"
                    :rules="changePwdUserRules"
                    ref="changePwdRef"
                >
                    <a-form-model-item
                        has-feedback
                        label="密码"
                        prop="password"
                    >
                        <a-input-password
                            v-model="userInfoChangePwd.password"
                        ></a-input-password>
                    </a-form-model-item>
                    <a-form-model-item
                        has-feedback
                        label="确认密码"
                        prop="checkpass"
                    >
                        <a-input-password
                            v-model="userInfoChangePwd.checkpass"
                        ></a-input-password>
                    </a-form-model-item>
                </a-form-model>
            </a-modal>
        </a-card>
    </div>
</template>

<script>
// 表格列配置
const columns = [
    {
        title: "id",
        dataIndex: "id",
        width: "10%",
        key: "id",
        align: "center",
    },
    {
        title: "用户名",
        dataIndex: "userName",
        width: "20%",
        key: "username",
        align: "center",
    },
    {
        title: "昵称",
        dataIndex: "nickname",
        width: "20%",
        key: "nickname",
        align: "center",
    },
    {
        title: "角色",
        dataIndex: "role",
        width: "20%",
        key: "role",
        scopedSlots: { customRender: "role" },
        align: "center",
    },
    {
        title: "操作",
        width: "30%",
        key: "action",
        scopedSlots: { customRender: "action" },
        align: "center",
    },
];
export default {
    data() {
        return {
            // 用户列表数据
            userlist: [],
            // 表格列信息（不可少）
            columns,

            visible: false,

            addUserVisible: false, //新增用户对话框是否显示
            editUserVisible: false, //编辑用户对话框是否显示
            changePwdVisible: false, //修改密码对话框是否显示

            //用户信息(新增用户使用)
            newUserInfo: {
                id: 0,
                username: "",
                password: "",
                checkpass: "",
                role: 2,
            },
            //用户信息（更新用户信息使用）
            userInfo: {
                id: 0,
                nickname: "string",
                qq: "string",
                email: "string",
                motto: "string",
                personalProfile: "string",
                smallAvatarIcon: "string",
                bigAvatarIcon: "string",
            },

            //用户信息（修改密码使用）
            userInfoChangePwd: {
                password: "",
                checkpass: "",
            },

            // 新增用户的表单验证
            // addUserRules: {
            //     // 用户名校验规则
            //     username: [
            //         {
            //             required: true,
            //             message: "请输入用户名",
            //             trigger: "blur",
            //         },
            //         {
            //             min: 4,
            //             max: 12,
            //             message: "用户名长度在4到12个字符之间",
            //             trigger: "blur",
            //         },
            //         {
            //             pattern: /^[A-Za-z]+[A-Za-z0-9]+$/,
            //             message: "用户名为字母后数组组成，首字母不能是数字",
            //         },
            //     ],
            //     // 密码校验规则
            //     password: [
            //         {
            //             validator: (rule, value, callback) => {
            //                 if (this.newUserInfo.password == "") {
            //                     callback(new Error("请输入密码"));
            //                 }
            //                 if (
            //                     [...this.newUserInfo.password].length < 6 ||
            //                     [...this.newUserInfo.password].length > 20
            //                 ) {
            //                     callback(new Error("密码长度在6到20位之间"));
            //                 } else {
            //                     callback();
            //                 }
            //             },
            //             trigger: "blur",
            //         },
            //     ],
            //     // 确认密码校验规则
            //     checkpass: [
            //         {
            //             validator: (rule, value, callback) => {
            //                 if (this.newUserInfo.checkpass == "") {
            //                     callback(new Error("请输入密码"));
            //                 }
            //                 if (
            //                     this.newUserInfo.checkpass !=
            //                     this.newUserInfo.password
            //                 ) {
            //                     callback(new Error("密码不一致，请重新输入"));
            //                 } else {
            //                     callback();
            //                 }
            //             },
            //             trigger: "blur",
            //         },
            //     ],
            // },

            // 更新用户的表单验证
            // userRules: {
            //     // 用户名校验规则
            //     username: [
            //         {
            //             required: true,
            //             message: "请输入用户名",
            //             trigger: "blur",
            //         },
            //         {
            //             min: 4,
            //             max: 12,
            //             message: "用户名长度在4到12个字符之间",
            //             trigger: "blur",
            //         },
            //         {
            //             pattern: /^[A-Za-z]+[A-Za-z0-9]+$/,
            //             message: "用户名为字母后数组组成，首字母不能是数字",
            //         },
            //     ],
            //     // 密码校验规则
            //     password: [
            //         {
            //             validator: (rule, value, callback) => {
            //                 if (this.userInfo.password == "") {
            //                     callback(new Error("请输入密码"));
            //                 }
            //                 if (
            //                     [...this.userInfo.password].length < 6 ||
            //                     [...this.userInfo.password].length > 20
            //                 ) {
            //                     callback(new Error("密码长度在6到20位之间"));
            //                 } else {
            //                     callback();
            //                 }
            //             },
            //             trigger: "blur",
            //         },
            //     ],
            //     // 确认密码校验规则
            //     checkpass: [
            //         {
            //             validator: (rule, value, callback) => {
            //                 if (this.userInfo.checkpass == "") {
            //                     callback(new Error("请输入密码"));
            //                 }
            //                 if (
            //                     this.userInfo.checkpass !=
            //                     this.userInfo.password
            //                 ) {
            //                     callback(new Error("密码不一致，请重新输入"));
            //                 } else {
            //                     callback();
            //                 }
            //             },
            //             trigger: "blur",
            //         },
            //     ],
            // },

            // 修改密码的表单验证

            changePwdUserRules: {
                // 密码校验规则
                password: [
                    {
                        validator: (rule, value, callback) => {
                            if (this.userInfoChangePwd.password == "") {
                                callback(new Error("请输入密码"));
                            }
                            if (
                                [...this.userInfoChangePwd.password].length <
                                    6 ||
                                [...this.userInfoChangePwd.password].length > 20
                            ) {
                                callback(new Error("密码长度在6到20位之间"));
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur",
                    },
                ],
                // 确认密码校验规则
                checkpass: [
                    {
                        validator: (rule, value, callback) => {
                            if (this.userInfoChangePwd.checkpass == "") {
                                callback(new Error("请输入密码"));
                            }
                            if (
                                this.userInfoChangePwd.checkpass !=
                                this.userInfoChangePwd.password
                            ) {
                                callback(new Error("密码不一致，请重新输入"));
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
        this.getUserList();
    },
    //计算属性
    computed: {
        IsAdmin: function () {
            if (this.userInfo.role === 1) {
                return true;
            } else {
                return false;
            }
        },
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {},
    //方法集
    methods: {
        // 获取用户列表
        async getUserList() {
            const { data: res } = await this.$axios.get("/users");
            if (res.status != 200) {
                return this.$message.error(res.message);
            }
            this.userlist = res.data;
        },

        // 删除用户
        deleteUser(id) {
            this.$confirm({
                title: "提示：请再次确认",
                content: "确定删除此用户吗?一旦删除，不可恢复。",
                onOk: async () => {
                    const res = await this.$axios.delete(`/admin/user/${id}`);
                    // console.log(res);
                    if (res.status != 200) {
                        return this.$message.error(res.message);
                    }
                    this.$message.success("删除成功");
                    this.getUserList();
                },
                onCancel: () => {
                    this.$message.info("操作已取消");
                },
            });
        },

        // 显示新增用户对话框
        // addUser() {
        //     this.addUserVisible = true;
        // },

        // 新增用户
        // addUserOk() {
        //     this.$refs.addUserRef.validate(async (valid) => {
        //         if (!valid)
        //             return this.$message.error("参数不符合要求请重新输入");
        //         const { data: res } = await this.$axios.post(
        //             "/admin/user/add",
        //             {
        //                 username: this.newUserInfo.username,
        //                 password: this.newUserInfo.password,
        //                 role: this.newUserInfo.role,
        //             }
        //         );
        //         if (res.status != 200) {
        //             return this.$message.error(res.message);
        //         }
        //         this.$refs.addUserRef.resetFields();
        //         this.addUserVisible = false;
        //         this.$message.success("新增用户成功");
        //         this.getUserList();
        //     });
        // },
        // 取消新增用户
        // addUserCancel() {
        //     this.$refs.addUserRef.resetFields();
        //     this.addUserVisible = false;
        //     this.$message.info("新增用户取消");
        // },

        // 是否管理员选择事件
        adminChange(checked) {
            if (checked) {
                this.userInfo.role = 1;
            } else {
                this.userInfo.role = 2;
            }
        },

        // 显示编辑用户对话框
        async editUser(id) {
            this.editUserVisible = true;
            const { data: res } = await this.$axios.get(`/users/${id}`);
            this.userInfo = res.data;
            this.userInfo.id = id;
        },
        // 编辑用户确认
        editUserOk() {
            this.$refs.editUserRef.validate(async (valid) => {
                if (!valid)
                    return this.$message.error("参数不符合要求请重新输入");

                const { data: res } = await this.$axios.put(
                    `/admin/user/${this.userInfo.id}`,
                    {
                        nickname: this.userInfo.nickname,
                        qq: this.userInfo.qq,
                        email: this.userInfo.email,
                        motto: this.userInfo.motto,
                        personalProfile: this.userInfo.personalProfile,
                        smallAvatarIcon: this.userInfo.smallAvatarIcon,
                        bigAvatarIcon: this.userInfo.bigAvatarIcon,
                        // role: this.role,
                    }
                );
                if (res.status != 200) {
                    return this.$message.error(res.message);
                }
                this.$refs.editUserRef.resetFields();
                this.editUserVisible = false;
                this.$message.success("编辑用户信息成功");
                this.getUserList();
            });
        },
        // 编辑用户取消
        editUserCancel() {
            this.$refs.editUserRef.resetFields();
            this.editUserVisible = false;
            this.$message.info("编辑取消");
        },

        // 重置密码
        // async resetPwd(id) {
        //     this.$confirm({
        //         title: "提示：请再次确认",
        //         content: "确定重置此用户的密码吗?",
        //         onOk: async () => {
        //             const { data: res } = await this.$axios.put(
        //                 `/admin/user/${id}/reset`
        //             );
        //             if (res.status != 200) {
        //                 return this.$message.error(res.message);
        //             }
        //             this.$message.success("重置密码成功");
        //         },
        //         onCancel: () => {
        //             this.$message.info("操作已取消");
        //         },
        //     });
        // },

        // 显示修改密码对话框
        async changePwd(id) {
            this.changePwdVisible = true;
            const { data: res } = await this.$axios.get(`/users/${id}`);
            this.userInfoChangePwd = res.data;
            this.userInfoChangePwd.id = id;
        },

        // 确认修改密码
        changePwdOk() {
            this.$refs.changePwdRef.validate(async (valid) => {
                if (!valid)
                    return this.$message.error("参数不符合要求请重新输入");

                const { data: res } = await this.$axios.put(
                    `/admin/user/${this.userInfoChangePwd.id}/changepwd`,
                    {
                        password: this.userInfoChangePwd.password,
                    }
                );
                if (res.status != 200) {
                    return this.$message.error(res.message);
                }
                this.$refs.changePwdRef.resetFields();
                this.changePwdVisible = false;
                this.$message.success("修改密码成功");
            });
        },

        // 取消修改密码
        changePwdCancel() {
            this.$refs.changePwdRef.resetFields();
            this.changePwdVisible = false;
            this.$message.info("取消修改密码");
        },
    },
};
</script>
<style scoped>
.actionSlot {
    display: flex;
    justify-content: center;
}
</style>